<template>

  <el-dialog title="表单收集详情" :visible.sync="showCollectionDetailDialog" center width="1000px">

    <el-tabs tab-position="left" style="height: 700px;" @tab-click="handleTabClick">
      <el-tab-pane label="表单收集详情">
        <div style="width: 60%; margin: 0 auto">
          <el-form :model="activityForm" :rules="rules" ref="activity">

            <el-form-item label="店铺名称" :label-width="formLabelWidth" prop="name">
              <el-input v-model="activityForm.store_name" autocomplete="off"></el-input>
            </el-form-item>


          </el-form>
          <div slot="footer" class="dialog-footer" style="position: relative; left: 90px">
            <el-button @click="cancelSubmit">取 消</el-button>
            <el-button type="primary" @click="submitStore('storeDataForm')">确 定</el-button>
          </div>
        </div>

      </el-tab-pane>

      <el-tab-pane label="表单收集员工">
        <el-table
          :data="activityEmployees"
          height="250"
          border
          style="width: 100%">
          <el-table-column
            prop="avatar"
            label="头像"
            width="180">
          </el-table-column>
          <el-table-column
            prop="nickname"
            label="昵称"
            width="180">
          </el-table-column>
          <el-table-column
            prop="address"
            label="加入时间">
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <el-tab-pane label="已收集信息">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="商品名称">
                  <span>{{ props.row.name }}</span>
                </el-form-item>
                <el-form-item label="所属店铺">
                  <span>{{ props.row.shop }}</span>
                </el-form-item>
                <el-form-item label="商品 ID">
                  <span>{{ props.row.id }}</span>
                </el-form-item>
                <el-form-item label="店铺 ID">
                  <span>{{ props.row.shopId }}</span>
                </el-form-item>
                <el-form-item label="商品分类">
                  <span>{{ props.row.category }}</span>
                </el-form-item>
                <el-form-item label="店铺地址">
                  <span>{{ props.row.address }}</span>
                </el-form-item>
                <el-form-item label="商品描述">
                  <span>{{ props.row.desc }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>

          <el-table-column
            label="商品 ID"
            prop="id">
          </el-table-column>

          <el-table-column
            label="商品名称"
            prop="name">
          </el-table-column>

          <el-table-column
            label="描述"
            prop="desc">
          </el-table-column>

        </el-table>
      </el-tab-pane>
    </el-tabs>

    <div class="main" v-if="showDetailActivityDialog" style="width: auto">
      <div class="left">
        <div>
          <span>活动名称:</span>
          <span>{{activityData.name}}</span>
        </div>
        <div>
          <span>用户:</span>
          <span v-if="activityData.customer.length>0">
            {{activityData.customer[0].nickname}}
          </span>
          <span v-else></span>
        </div>
        <div>
          <span>店铺:</span>
          <span v-if="activityData.store_info.length>0">
            {{activityData.store_info[0].name}}
          </span>
          <span v-else></span>
        </div>
        <div>
          <span>开始时间:</span>
          <span>{{activityData.start_date}}</span>
        </div>
        <div>
          <span>结束时间:</span>
          <span>{{activityData.end_date}}</span>
        </div>
        <div>
          <span>名额总数:</span>
          <span>{{activityData.allowed_total}}</span>
        </div>
        <div>
          <span>是否开启剩余20%自动增加金额:</span>
          <span>{{activityData.enable_auto_add_allowed_total===1?'是':'否'}}</span>
        </div>
        <div>
          <span>是否开启每人允许限购数量:</span>
          <span>{{activityData.enablea_allowed_purchase_quantity===1 ? '是':'否'}}</span>
        </div>
        <div>
          <span>每人允许限购数量:</span>
          <span>{{activityData.allowed_purchase_quantity}}</span>
        </div>
        <div>
          <span>是否开启买课程赠送课程:</span>
          <span>{{activityData.enable_purchase_course_then_give_course===1 ? '是':'否'}}</span>
        </div>
        <div>
          <span>购买课程:</span>
          <span>{{activityData.purchase_course}}</span>
        </div>
        <div>
          <span>赠送课程:</span>
          <span>{{activityData.give_course}}</span>
        </div>
        <div>
          <span>活动状态:</span>
          <span v-if="activityData.active_status===0">未开始</span>
          <span v-else-if="activityData.active_status===1">进行中</span>
          <span v-else-if="activityData.active_status===2">已结束</span>
          <span v-else>''</span>
        </div>
        <div>
          <span>操作状态:</span>
          <span>{{activityData.operate_status===1 ? '发布':'暂存'}}</span>
        </div>
        <div>
          <span>系统状态:</span>
          <span>{{activityData.status===1 ? '启用':'停用'}}</span>
        </div>
        <div>
          <span>发布日期:</span>
          <span>{{activityData.date_published}}</span>
        </div>
        <div>
          <span>增加日期:</span>
          <span>{{activityData.date_added}}</span>
        </div>
        <div>
          <span>修改日期:</span>
          <span>{{activityData.date_midified}}</span>
        </div>
      </div>

      <div class="right">

        <div>
          <span>关联门店:</span>
          <span class="salesroom">
            <template v-if="activityData.salesroom==''">
              
            </template>
            <template v-else v-for="item in activityData">
              <template v-if="item.salesroom!==null">
                {{item.salesroom[0].name+'、'}}
              </template>
            </template>
          </span>
        </div>


        <div>
          <span>活动描述:</span>
          <span v-if="activityData.activity_description!=''">
            <template v-for="item in activityData.activity_description">
              <template v-if="item.description_type === 0">
                <p>{{item.value}}</p>
              </template>
              <img v-if="item.description_type===1" :src="item.value" alt=""/>
            </template>
          </span>
          <span v-else></span>
        </div>

        <div>
          <span>活动图片:</span>
          <span>
            <template v-for="item in activityData.image">
              <img :src="item.image" alt="暂无图片"  @click="bigImage(item.image)"/>
            </template>
          </span>
        </div>

<!--        group_purchase: Array(1)-->
<!--        0:-->
<!--        activity_group_purchase_id:     主键-->
<!--        activity_id:                    活动id-->
<!--        quanlity_group_purchase:        成团人数-->
<!--        enable_virtual_group_purchase:  是否开启虚拟成团-->
<!--        end_group_purchase_type: 0      开启虚拟成团后，触发成团条件：0用户开团指定小时后自动成团，1活动结束自动成团-->
<!--        end_group_purchase_hour: 24     自动成团触发条件为指定小时时的值-->
<!--        refund_type: 0                  退款方式0不退款，线下协商退款； 1系统自动退款给用户-->
<!--        description: null               团购活动说明-->
<!--        enable_head_welfare: 1          是否开启团长福利-->
<!--        head_welfare_content: "团战"     团长福利内容-->
<!--        show_other_group_purchase: 1    是否在报名页面显示“参与他人的团”-->

        <div class="course">
          <span>团购信息:</span>
          <span class="course-item" v-if="activityData.group_purchase.length>0">
            <template v-for="item in activityData.group_purchase">
              <div>
                <div>
                  <span>成团人数: </span>
                  {{item.quanlity_group_purchase}}
                </div>
                <div>
                  <span>是否开启虚拟成团:</span>
                  <template v-if="item.enable_virtual_group_purchase == 0">
                    {{"否"}}
                  </template>
                  <template v-if="item.enable_virtual_group_purchase == 1">
                    {{"是"}}
                  </template>
                </div>
                <div>
                  <span>退款方式:</span>
                  <template v-if="item.refund_type == 0">
                    {{"不退款，线下协商退款"}}
                  </template>
                  <template v-if="item.refund_type == 1">
                    {{"系统自动退款给用户"}}
                  </template>
                </div>
                <div>
                  <span>团购活动说明:</span>{{item.description}}
                </div>

                <div>
                  <span>是否开启团长福利:</span>
                  <template v-if="item.enable_head_welfare == 0">
                    {{"否"}}
                  </template>
                  <template v-if="item.enable_head_welfare == 1">
                    {{"是"}}
                  </template>
                </div>

                <div>
                  <span>团长福利内容:</span>{{item.head_welfare_content}}
                </div>

                <div>
                  <span>是否在报名页面显示“参与他人的团”:</span>
                  <template v-if="item.show_other_group_purchase == 0">
                    {{"否"}}
                  </template>
                  <template v-if="item.show_other_group_purchase == 1">
                    {{"是"}}
                  </template>
                </div>
              </div>
            </template>
          </span>
          <span v-else></span>
        </div>

        <div class="course">
          <span>课程信息:</span>
          <span class="course-item" v-if="activityData.course_msg.length>0">
            <template v-for="item in activityData.course_msg">
              <div>
                <div>
                  <span>课程名称: </span>{{item.name}}
                </div>
                <div>
                  <span>原价:</span>{{item.origin_price}}
                </div>
                <div>
                  <span>优惠价:</span>{{item.special_price}}
                </div>
                <div>
                  <span>团购价:</span>{{item.group_purchase_price}}
                </div>
                <div>
                  <span>限制课程门数:</span>{{item.limit_course}}
                </div>
                <div>
                  <span>课程图片: </span> <img class="course-img" :src="item.image" alt=""
                                           @click="bigImage(item.image)">
                </div>
              </div>
            </template>
          </span>
          <span v-else></span>
        </div>
      </div>
    </div>

    <transition name="el-zoom-in-top">
      <div v-show="bigImageSrc !== null && bigImageSrc!==''" class="bigImg" @click="bigImage(null)">
        <img :src="bigImageSrc" style="width:auto; height:400px;border-radius:5px;">
      </div>
    </transition>

  </el-dialog>
</template>

<script>

import store from '@/store'
import {getActivityCoupon, getActivityOrder} from '@/api/thk/activity'

  export default {
    name: 'activityDetail',
    data(){
      return{
        showCollectionDetailDialog:false,
        formLabelWidth:'130px',
        activityData: null,
        showDetailActivityDialog: false,
        bigImageSrc: null,
        activityForm:{//活动详情表单
          store_id:0,
          store_name:'',
          create_customer:0,
          create_customer_name:'',
          name:'',//活动名称
          type:0,//活动类型

        },
        activityEmployees:[],
        rules:[],
        tableData:[]

      }
    },

    methods:{
      
      showDetailDialog(row){
        this.showCollectionDetailDialog = !this.showCollectionDetailDialog
        this.showDetailActivityDialog = !this.showDetailActivityDialog
        this.activityData = row
        this.getactivityForm(row)
        console.log(">>>>> detail activity data >>>>>")
        console.log(this.activityData)
      },

      getactivityForm(row){
        this.activityForm.store_id=row.store_id
        this.activityForm.store_name=row.store_info[0].name
        this.create_customer=row.create_customer
      },
      // 大图弹窗函数
      bigImage(src) {
        if (src!==null) {
          this.$set(this, 'bigImageSrc', src)
          console.log(this.bigImageSrc)
        } else {
          this.$set(this, 'bigImageSrc', null)
        }
      },

      // 点击tab选项
      handleTabClick(tab, event) {

        switch(tab.index){
          case '0':
             break;
          case '1':
            this.getActivityEmployee()
            
            break;
          case '2':
            this.getActivityCoupon()
            break;
        }
      },

      //获取活动优惠券
      getActivityCoupon(){

        getActivityCoupon(store.getters.token, {activity_id:this.activityData.activity_id}).then(res =>{
          
        
          console.log('-------',res)
          
        },error => {
          console.log(error)
        })
      
      },

      // 获取活动员工
      getActivityEmployee(){


      },
      cancelSubmit(){

      }

    }
  }
</script>

<style scoped>


  .main{
    font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
    font-size: 14px;
    display: flex;
  }

  .left{
    border-right: 1px solid #bdc3c7;
  }

  .right{
    border-left: 1px solid #bdc3c7;
  }

  .left, .right{
    height: auto;
    flex: 1;
  }

  .left>div, .right>div{
    display: flex;
  }

  .left>div>span:first-child, .right>div>span:first-child{
    flex: 2;
    text-align: right;
    font-weight: 600;
    padding: 10px 0;
  }

  .right>div>span:first-child{
    flex: 1;
  }


  .left>div>span:last-child, .right>div>span:last-child{
    flex: 3;
    text-align: left;
    margin-left: 10px;
    padding: 10px 0;
  }

  img{
    height: 50px;
    width: 50px;
    margin-right: 5px;
  }

  .course {
    margin-bottom: 10px;
  }

  .course span:first-child{
    display: inline-block;
    padding-top: 4px;
  }

  .course-item{
    display: block;
    position: relative;
    top: 20px;
    left: -70px;
    margin-bottom: 3px;
  }

  .course-item>div{
    border-bottom: 1px solid #e1e1e1;
    padding: 4px 0;
  }

  .course-item>div:last-child{
    border-bottom: none;
  }

  .course-item span{
    display: inline-block;
    margin-right: 7px;
    font-weight: 500;
    color: #909399;
  }

  .course-item .course-img{
    vertical-align: top;
  }

  .bigImg img{
    max-width: 600px;
    min-width: 150px;
    height:auto;
    border-radius:10px;
  }

  .bigImg{
    min-width:100%;
    min-height:100%;
    position:fixed;
    top:0;
    left:0;
    z-index:999999;
    background:rgba(0,0,0,.5);
    display:flex;
    justify-content:center;
    align-items:center;
    cursor:pointer;
    /*transition:1s;*/
  }


</style>
